<template>
  <div id="orderSearchDiv">
    <div id="dataViewDiv">
      <div>
        <el-select
          v-model="formInline.goodsId"
          placeholder="请选择"
          @change="queryScanCodeTotal()"
          clearable
        >
          <el-option label="全部" value></el-option>
          <el-option
            v-for="(send, i) in gradelevelOptions"
            :key="i"
            :value="send.goodsId"
            :label="send.goodsName"
          ></el-option>
        </el-select>
        <el-radio-group v-model="dataViewDate" @change="queryScanCodeTotal()">
          <el-radio-button label="1">今天</el-radio-button>
          <el-radio-button label="2">最近三天</el-radio-button>
          <el-radio-button label="3">最近七天</el-radio-button>
          <el-radio-button label="4" class="el-radio-button-inner-datepicker">
            <el-date-picker
              v-model="dataViewRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @focus="focusPickerDate"
              @blur="changeDataViewDate"
              @change="changeDataViewDate"
            ></el-date-picker>
          </el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <div id="order_total_flex">
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                扫码出库数量（瓶）
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.outStock }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                云店销售数量（瓶）
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.outStockStore }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                扫码出库店铺数量（家）
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.saleAmount }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                云店销售店铺数量（家）
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.saleAmountStore }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      id="form1"
      style="text-align: center; margin-top: 30px; margin-left: 35px"
    >
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        @keyup.enter.native="search()"
        id="orderSearchForm"
      >
        <el-form-item label="　　扫码出库编号">
          <br />
          <br />
          <el-input
            v-model="formInline.orderId"
            style="margin-left:-80px;width:200px"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item
          label="　　大区名称"
          style="margin-left:-50px;"
          v-if="orgType == 1 || orgType == 2"
        >
          <br />
          <br />
          <el-input
            style="margin-left:-80px;width:200px"
            v-model="formInline.upOrgZone"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item
          label="　　营销区域名称"
          style="margin-left:-50px;"
          v-if="orgType == 1 || orgType == 2 || orgType == 3"
        >
          <br />
          <br />
          <el-input
            style="margin-left:-80px;width:200px"
            v-model="formInline.baseName"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="　店铺授权码" style="margin-left:-50px;">
          <br />
          <br />
          <el-input
            style="margin-left:-80px;width:200px"
            v-model="formInline.authCode"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="　　店铺名称">
          <br />
          <br />
          <el-input
            style="margin-left:-100px;width:200px"
            v-model="formInline.storeName"
            placeholder
          ></el-input>
        </el-form-item>

        <br />

        <!-- <el-form-item label="　　店主姓名">
                    <el-input v-model="formInline.shopOwnerName" placeholder></el-input>
                </el-form-item> -->

        <el-form-item label="　　商品名称">
          <br />
          <br />
          <el-input
            style="margin-left:-80px;width:200px"
            v-model="formInline.goodsName"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="购买方名称">
          <br />
          <br />
          <el-input
            style="margin-left:-80px;width:200px"
            v-model="formInline.buyName"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <br />
          <br />
          <el-input
            style="margin-left:-80px;width:200px"
            v-model="formInline.buyTel"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="　　扫码时间">
          <br />
          <br />
          <el-date-picker
            style="margin-left:-80px;width:430px"
            v-model="formInline.dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <div id="multiBtnDiv" style="margin-left:700px;text-align:right">
          <el-button
            type="primary"
            @click="search()"
            size="mini"
            icon="el-icon-search"
            :disabled="dindanflagone"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="kong()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >
          <el-button
            type="success"
            @click="exportExcel()"
            size="mini"
            icon="el-icon-s-data"
            :loading="exportLoading"
            >导出</el-button
          >
          <el-button
            type="primary"
            @click="showConfigTableDialog()"
            size="mini"
            icon="el-icon-setting"
            :loading="insertLoading"
            >列表配置</el-button
          >
        </div>
      </el-form>
    </div>
    <div class="table1">
      <el-table
        id="rebateSetTable"
        ref="table1"
        height="500px"
        key="table1"
        tooltip-effect="dark"
        v-loading="loading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        @sort-change="handleSort"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in col"
          :key="`col_${index}`"
          :prop="dropCol[index].prop"
          :width="dropCol[index].width"
          :min-width="200"
          :label="item.label"
          :sortable="item.sortable"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="showScanCodeDetail(scope.row.uuid)"
              type="text"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-form :inline="true" :model="formInline">
        <el-form-item style="margin-top: 0px"></el-form-item>
      </el-form>
      <div class="block" style="margin-top: -22px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :disabled="dindanflag"
          :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
          :current-page="listQuery.current"
          :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!--列表配置-->
    <el-dialog
      title="列表配置"
      :visible.sync="configTableDialogVisible"
      width="50%"
      @close="closeConfigTableDialog()"
    >
      <div id="configTableDiv">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline">
          <el-form-item label="选择列表字段">
            <el-checkbox
              :indeterminate="formInline2.isIndeterminate"
              v-model="formInline2.isAll"
              style="margin-top: 10px"
              @change="isAllFieldChange"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="userMenuShowFields"
            @change="isSingleFieldChange"
          >
            <el-checkbox
              v-for="item in userMenuFieldList"
              :label="item.fieldCode"
              :key="item.fieldCode"
              style="margin: 15px 10px; width: 120px"
              >{{ item.fieldName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align: center; margin-top: 30px">
            <el-button type="info" @click="closeConfigTableDialog()" size="mini"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="insertUserFieldRelation()"
              size="mini"
              >确 认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!--商品图片弹窗-->
    <el-dialog
      title="商品图片"
      :visible.sync="goodsPicDialoVisible"
      width="31%"
    >
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-row>
            <el-col>
              <img
                v-for="(item, i) in picList"
                :key="i"
                :src="item"
                width="150"
                height="120"
                style="margin-left: 10px"
                @click="handlePreview(item)"
                title="点击查看"
              />
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>

    <!--图片预览弹窗-->
    <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>

    <!--查看出库条码弹窗-->
    <el-dialog
      :visible.sync="dialogVisibleScanCode"
      title="查看出库条码"
      size="tiny"
    >
      <el-table :data="scanCodeData" style="width: 50%">
        <el-table-column prop="barCode" label="" width=""> </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { getmemberrule } from '@/api/membergrade';
import {
  queryScanCodeTotal,
  queryScanCodeByParam,
  queryTradeOrderByParamNoPage,
  queryScanCodeListExcel,
  queryTradeOrderPayInfo,
  queryTradeOrderItemList,
  queryUserMenuFieldByParam,
  insertUserFieldRelation,
  queryBarCodeById,
  queryScanGoods,
} from '@/api/tradeOrderSearch';
import qs from 'qs';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

const curDateStr = function() {
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  var date = curDate.getDate();
  date = date > 9 ? date : '0' + date;
  return year + '-' + month + '-' + date;
};
export default {
  data() {
    return {
      logininfo: '',
      orgSeq: '',
      dindanflag: false,
      dindanflagone: false,
      orgType: '',
      loading: true,
      exportLoading: false,
      insertLoading: false,
      goodsPicDialoVisible: false,
      dialogVisibleImg: false,
      dialogVisibleScanCode: false,
      scanCodeData: [],
      dialogImageUrl: '',
      picList: [],
      dataViewDate: '1',
      dataViewRange: '',
      totalData: {
        orderNum: 0,
        outStock: 0,
        saleAmount: 0,
        orderFinishNum: 0,
        orderAcceptNum: 0,
        orderPostNum: 0,
        orderCancelNum: 0,
        payMoney: 0,
        saleAmountStore: 0,
        outStockStore: 0,
      },
      orderStatusList: [
        {
          id: '0',
          name: '待支付',
        },
        {
          id: '1',
          name: '待发货',
        },
        {
          id: '2',
          name: '待收货',
        },
        {
          id: '3',
          name: '已完成',
        },
        {
          id: '-1',
          name: '已退款',
        },
      ], //订单状态
      returnStatusList: [
        {
          id: '0',
          name: '正常单',
        },
        {
          id: '1',
          name: '被退货单',
        },
        {
          id: '2',
          name: '退货单',
        },
      ], //退货状态
      payMethodList: [
        {
          id: '0',
          name: '云店线下',
        },
        {
          id: '1',
          name: '线上支付',
        },
        {
          id: '2',
          name: 'pos线下支付',
        },
        {
          id: '3',
          name: '微信',
        },
        {
          id: '4',
          name: '支付宝',
        },
        {
          id: '5',
          name: '银行卡',
        },
      ],
      deliveryMethodList: [
        {
          id: '1',
          name: '门店自提',
        },
        {
          id: '2',
          name: '配送服务',
        },
        {
          id: '3',
          name: '快递服务',
        },
      ], //配送方式
      gradelevelOptions: [], //会员等级
      formInline: {
        sortList: [],
        orderId: '',
        orderStatus: '',
        returnStatus: '',
        customizeStatus: '',
        dateRange: '',
        payDateRange: '',
        fhDateRange: '',
        shopId: '',
        storeName: '',
        shopOwnerName: '',
        warzoneId: '',
        upOrgZone: '',
        baseId: '',
        baseName: '',
        goodsId: '',
        buyName: '',
        buyTel: '',
        goodsName: '',
        payMethod: '',
        deliveryMethod: '',
        authCode: '',
        isBuyLimit: '',
        isGiftOrder: '',
        isFeastOrder: '',
        goodsStyle: '',
      },
      allCol: [],
      col: [],
      dropCol: [],
      expandRowKeys: [],
      tableData: [], //订单列表数据
      tableDataExcel: [], //导出数据
      payData: [], //支付列表数据
      itemData: [], //商品列表数据
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      sort: '',
      order: '',
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'canCodeDataStatistics',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      userOldMenuShowFields: [], //原显示的列名
      pickerOptions: {
        shortcuts: [
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
        /*
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const day30 = 30 * 24 * 3600 * 1000
            let maxTime = this.pickerMinDate + day30
            if (maxTime > new Date()) {
              maxTime = new Date()
            }
            return time.getTime() > maxTime
          }
          return time.getTime() > Date.now()
        }
        */
      },
    };
  },
  mounted() {
    this.logininfo = localStorage.getItem('logininfo');
    let orgJson = JSON.parse(this.logininfo);
    if (
      orgJson != null &&
      orgJson.orgList != null &&
      orgJson.orgList.length > 0
    ) {
      this.orgSeq = orgJson.orgList[0].orgSeq;
      this.orgType = orgJson.orgList[0].orgType;
    }
    if (this.orgType == 2) {
      //大区
      this.formInline.warzoneId = this.orgSeq;
    } else if (this.orgType == 3) {
      //营销区域
      this.formInline.baseId = this.orgSeq;
    } else if (this.orgType == 4) {
      //门店
      this.formInline.shopId = this.orgSeq;
    }
    this.queryUserMenuFieldByParam(); //加载列表配置字段
    this._getmemberinfo(); //加载等级

    var orderSearchParam = sessionStorage.getItem('orderSearchParam');
    var pageFrom = sessionStorage.getItem('pageFrom');
    if (orderSearchParam != null && pageFrom == 'normalOrderDetail') {
      orderSearchParam = JSON.parse(orderSearchParam);
      this.formInline = orderSearchParam.formInline;
      this.listQuery = orderSearchParam.listQuery;
      this.total = orderSearchParam.total;
    }
    sessionStorage.removeItem('orderSearchParam');
    sessionStorage.removeItem('pageFrom');
    this.queryScanCodeTotal(); //加载看板头部信息
    this.queryScanCodeByParam(); //加载订单列表
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    this.columnDrop();
  },
  filters: {
    numFilter(value) {
      let realVal = '';
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后2位
        realVal = parseFloat(value).toFixed(2);
      } else {
        realVal = '--';
      }
      return realVal;
    },
  },
  methods: {
    //拖拽列表
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex - 1];
          this.dropCol.splice(evt.oldIndex - 1, 1);
          this.dropCol.splice(evt.newIndex - 1, 0, oldItem);
        },
      });
    },
    //客户等级获取
    _getmemberinfo() {
      let data = {
        size: 99,
        current: 1,
        condition: {},
        ascs: [],
        descs: [],
      };
      queryScanGoods(data).then((res) => {
        this.gradelevelOptions = res.records;
      });
    },
    //点击空白日期初始化
    focusPickerDate() {
      this.dataViewRange = '';
    },
    //点击头部时间选择切换为日期状态
    changeDataViewDate() {
      this.dataViewDate = '4';
      this.queryScanCodeTotal();
    },
    /*头部看板*/
    queryScanCodeTotal() {
      let beginDate = '';
      let endDate = '';
      if (
        this.dataViewDate == '4' &&
        this.dataViewRange != null &&
        this.dataViewRange.length == 2
      ) {
        beginDate = this.dataViewRange[0];
        endDate = this.dataViewRange[1];
      } else {
        this.dataViewRange = '';
      }
      let data = {
        dataViewDate: this.dataViewDate,
        beginDate: beginDate,
        endDate: endDate,
        isReturn: 0, //退款订单为1，正常订单为0
        isCustomizeOrder: 0, //定制订单为1，普通订单为0
        shopId: this.formInline.shopId.trim(),
        warzoneId: this.formInline.warzoneId.trim(),
        baseId: this.formInline.baseId.trim(),
        goodsId: this.formInline.goodsId,
      };
      queryScanCodeTotal(data).then((res) => {
        if (res != null) {
          this.totalData.outStock = res.result.outStock;
          this.totalData.outStockStore = res.result.outStockStore;
          this.totalData.saleAmount = res.result.saleAmount;
          this.totalData.saleAmountStore = res.result.saleAmountStore;
        }
      });
    },
    /*订单列表*/
    queryScanCodeByParam() {
      let beginDate = '';
      let endDate = '';
      if (
        this.formInline.dateRange != null &&
        this.formInline.dateRange.length == 2
      ) {
        beginDate = this.formInline.dateRange[0];
        endDate = this.formInline.dateRange[1];
      } else {
        this.formInline.dateRange = '';
      }
      let payBeginDate = '';
      let payEndDate = '';
      if (
        this.formInline.payDateRange != null &&
        this.formInline.payDateRange.length == 2
      ) {
        payBeginDate = this.formInline.payDateRange[0];
        payEndDate = this.formInline.payDateRange[1];
      } else {
        this.formInline.payDateRange = '';
      }
      let fhBeginDate = '';
      let fhEndDate = '';
      if (
        this.formInline.fhDateRange != null &&
        this.formInline.fhDateRange.length == 2
      ) {
        fhBeginDate = this.formInline.fhDateRange[0];
        fhEndDate = this.formInline.fhDateRange[1];
      } else {
        this.formInline.fhDateRange = '';
      }
      let data = {
        current: this.listQuery.current,
        size: this.listQuery.size,
        condition: {
          sort: this.sort,
          sortList: this.formInline.sortList,
          isReturn: 0, //退款订单为1，正常订单为0
          isCustomizeOrder: 0, //定制订单为1，普通订单为0
          orderId: this.formInline.orderId.trim(),
          orderStatus: this.formInline.orderStatus,
          returnStatus: this.formInline.returnStatus,
          customizeStatus: this.formInline.customizeStatus,
          beginDate: beginDate,
          endDate: endDate,
          payBeginDate: payBeginDate,
          payEndDate: payEndDate,
          fhBeginDate: fhBeginDate,
          fhEndDate: fhEndDate,
          shopId: this.formInline.shopId.trim(),
          storeName: this.formInline.storeName.trim(),
          shopOwnerName: this.formInline.shopOwnerName.trim(),
          warzoneId: this.formInline.warzoneId.trim(),
          upOrgZone: this.formInline.upOrgZone.trim(),
          baseId: this.formInline.baseId.trim(),
          baseName: this.formInline.baseName.trim(),
          goodsId: this.formInline.goodsId,
          buyName: this.formInline.buyName.trim(),
          buyTel: this.formInline.buyTel.trim(),
          goodsName: this.formInline.goodsName.trim(),
          payMethod: this.formInline.payMethod,
          deliveryMethod: this.formInline.deliveryMethod,
          authCode: this.formInline.authCode.trim(),
          isBuyLimit: this.formInline.isBuyLimit,
          isGiftOrder: this.formInline.isGiftOrder,
          isFeastOrder: this.formInline.isFeastOrder,
          goodsStyle: this.formInline.goodsStyle,
        },
        ascs: [],
        descs: [],
      };
      queryScanCodeByParam(data).then((res) => {
        this.dindanflag = false;
        this.dindanflagone = false;
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;

      this.queryScanCodeByParam();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.dindanflag = true;
      this.queryScanCodeByParam();
    },
    //查询
    search() {
      this.listQuery.current = 1;
      this.dindanflagone = true;
      this.queryScanCodeByParam();
    },
    //清空
    kong() {
      this.formInline.sortList = [];
      this.formInline.orderId = '';
      this.formInline.orderStatus = '';
      this.formInline.returnStatus = '';
      this.formInline.customizeStatus = '';
      this.formInline.dateRange = '';
      this.formInline.payDateRange = '';
      this.formInline.fhDateRange = '';
      this.formInline.storeName = '';
      this.formInline.shopOwnerName = '';
      this.formInline.upOrgZone = '';
      this.formInline.baseName = '';
      this.formInline.goodsId = '';
      this.formInline.buyName = '';
      this.formInline.buyTel = '';
      this.formInline.goodsName = '';
      this.formInline.payMethod = '';
      this.formInline.deliveryMethod = '';
      this.formInline.authCode = '';
      this.formInline.isBuyLimit = '';
      this.formInline.isGiftOrder = '';
      this.formInline.isFeastOrder = '';
      this.formInline.goodsStyle = '';
    },
    //流导出
    exportExcel() {
      let beginDate = '';
      let endDate = '';
      if (
        this.formInline.dateRange != null &&
        this.formInline.dateRange.length == 2
      ) {
        beginDate = this.formInline.dateRange[0];
        endDate = this.formInline.dateRange[1];
      } else {
        this.formInline.dateRange = '';
      }
      let payBeginDate = '';
      let payEndDate = '';
      if (
        this.formInline.payDateRange != null &&
        this.formInline.payDateRange.length == 2
      ) {
        payBeginDate = this.formInline.payDateRange[0];
        payEndDate = this.formInline.payDateRange[1];
      } else {
        this.formInline.payDateRange = '';
      }
      let fhBeginDate = '';
      let fhEndDate = '';
      if (
        this.formInline.fhDateRange != null &&
        this.formInline.fhDateRange.length == 2
      ) {
        fhBeginDate = this.formInline.fhDateRange[0];
        fhEndDate = this.formInline.fhDateRange[1];
      } else {
        this.formInline.fhDateRange = '';
      }
      let data = {
        sort: this.sort,
        sortList: this.formInline.sortList,
        isReturn: 0, //退款订单为1，正常订单为0
        isCustomizeOrder: 0, //定制订单为1，普通订单为0
        orderId: this.formInline.orderId.trim(),
        orderStatus: this.formInline.orderStatus,
        returnStatus: this.formInline.returnStatus,
        customizeStatus: this.formInline.customizeStatus,
        beginDate: beginDate,
        endDate: endDate,
        payBeginDate: payBeginDate,
        payEndDate: payEndDate,
        fhBeginDate: fhBeginDate,
        fhEndDate: fhEndDate,
        shopId: this.formInline.shopId.trim(),
        storeName: this.formInline.storeName.trim(),
        shopOwnerName: this.formInline.shopOwnerName.trim(),
        warzoneId: this.formInline.warzoneId.trim(),
        upOrgZone: this.formInline.upOrgZone.trim(),
        baseId: this.formInline.baseId.trim(),
        baseName: this.formInline.baseName.trim(),
        goodsId: this.formInline.goodsId,
        buyName: this.formInline.buyName.trim(),
        buyTel: this.formInline.buyTel.trim(),
        goodsName: this.formInline.goodsName.trim(),
        payMethod: this.formInline.payMethod,
        deliveryMethod: this.formInline.deliveryMethod,
        authCode: this.formInline.authCode.trim(),
        isBuyLimit: this.formInline.isBuyLimit,
        isGiftOrder: this.formInline.isGiftOrder,
        isFeastOrder: this.formInline.isFeastOrder,
        goodsStyle: this.formInline.goodsStyle,
      };
      this.exportLoading = true;
      queryScanCodeListExcel(data).then((res) => {
        this.exportLoading = false;
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const link = document.createElement('a');
        link.style = 'display:none';
        link.href = URL.createObjectURL(blob);
        link.download =
          new Date().toLocaleDateString() + '专卖店扫码出库数据统计表.xlsx';
        document.body.appendChild(link);
        link.click();
      });
    },
    //导出excel（分页）
    exportExcel2() {
      /* generate workbook object from table */
      var head = document.querySelector(
        '#rebateSetTable div.el-table__header-wrapper'
      );
      var body = document.querySelector(
        '#rebateSetTable div.el-table__body-wrapper'
      );
      var all = document.createElement('div');
      all.appendChild(head.cloneNode(true));
      all.appendChild(body.cloneNode(true));
      let wb = XLSX.utils.table_to_book(all);
      /* get binary string as output */
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          '专卖店扫码出库数据统计.xlsx'
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    },
    //数字格式化
    fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        if (cellValue < 0) {
          return '0.00';
        } else {
          return cellValue.toFixed(2);
        }
      } else {
        return cellValue;
      }
    },
    //查看订单详情（跳转）
    showOrderDetail(v) {
      let orderSearchParam = {
        formInline: this.formInline,
        listQuery: this.listQuery,
        total: this.total,
      };
      sessionStorage.setItem('pageFrom', 'normalOrderSearch');
      sessionStorage.setItem(
        'orderSearchParam',
        JSON.stringify(orderSearchParam)
      );
      this.$router.push({
        name: 'normalOrderDetail',
        params: {
          edit: v,
        },
      });
    },
    //转下载文件
    sheet2blob(sheet, sheetName) {
      sheetName = sheetName || 'sheet1';
      var workbook = {
        SheetNames: [sheetName],
        Sheets: {},
      };
      workbook.Sheets[sheetName] = sheet;
      // 生成excel的配置项
      var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary',
      };
      var wbout = XLSX.write(workbook, wopts);
      var blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
      // 字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
      return blob;
    },
    //下载文件触发弹窗
    openDownloadDialog(url, saveName) {
      if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      }
      var aLink = document.createElement('a');
      aLink.href = url;
      aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
      var event;
      if (window.MouseEvent) {
        event = new MouseEvent('click');
      } else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent(
          'click',
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    },
    //显示配置弹窗
    showConfigTableDialog() {
      this.userMenuShowFields = this.userOldMenuShowFields;
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
      this.configTableDialogVisible = true;
    },
    //关闭配置弹窗
    closeConfigTableDialog() {
      this.configTableDialogVisible = false;
      let data = {
        menuCode: this.formInline2.menuCode,
      };
    },
    queryUserMenuFieldByParam() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.userMenuAllFields = []; //全部的列名
      this.userMenuShowFields = []; //显示的列名
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          this.userMenuAllFields.push(item.fieldCode);
          if (item.isShow == 1) {
            this.userMenuShowFields.push(item.fieldCode);
          }
        });
        if (
          this.userMenuShowFields.length == 0 ||
          this.userMenuShowFields.length == this.userMenuAllFields.length
        ) {
          this.userMenuShowFields = this.userMenuAllFields;
          this.formInline2.isAll = true;
        } else {
          this.formInline2.isAll = false;
          this.formInline2.isIndeterminate = true;
        }
        this.insertUserFieldRelation(1);
      });
    },
    getNewCol() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.col = [];
      this.dropCol = [];
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          if (item.isShow == 1) {
            this.col.push({ label: item.fieldName, prop: item.fieldCode });
            this.dropCol.push({ label: item.fieldName, prop: item.fieldCode });
          }
        });
        if (this.col.length == 0) {
          this.col = this.allCol;
          this.dropCol = this.allCol;
          this.formInline2.isAll = true;
        }
        this.col.forEach((item, index) => {
          if (item.prop == 'scanningTime') {
            this.$set(item, 'sortable', 'scanningTime');
          } else if (item.prop == 'payMoney') {
            this.$set(item, 'sortable', 'payMoney');
          } else if (item.prop == 'orderTime') {
            this.$set(item, 'sortable', 'orderTime');
          }
        });
      });
    },
    //保存显示字段
    insertUserFieldRelation(isInit) {
      if (
        this.userMenuShowFields == null ||
        this.userMenuShowFields.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '列表字段不可为空',
          type: 'info',
        });
        return;
      }
      let data = {
        menuCode: this.formInline2.menuCode,
        fieldList: this.userMenuShowFields,
      };
      if (isInit == 1) {
        insertUserFieldRelation(data).then((res) => {
          if (res.code == 1) {
            this.userOldMenuShowFields = this.userMenuShowFields;
            this.closeConfigTableDialog();
            this.getNewCol();
          }
        });
        return;
      }
      this.insertLoading = true;
      insertUserFieldRelation(data).then((res) => {
        this.insertLoading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          this.userOldMenuShowFields = this.userMenuShowFields;
          this.closeConfigTableDialog();
          this.getNewCol();
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
    },
    //是否全选字段
    isAllFieldChange(val) {
      this.userMenuShowFields = val ? this.userMenuAllFields : [];
      this.formInline2.isIndeterminate = false;
    },
    //是否选中单个字段
    isSingleFieldChange(val) {
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
    },
    //获取字段勾选状态
    getUserMenuFieldStatus(fieldCode) {
      if (this.userMenuShowFields != null) {
        for (let i = 0; i < this.userMenuShowFields.length; i++) {
          if (this.userMenuShowFields[i] == fieldCode) {
            return true;
          }
        }
        return false;
      }
    },
    //是否显示字段
    isShow(fieldCode) {
      if (this.formInline2.isAll || this.getUserMenuFieldStatus(fieldCode)) {
        return true;
      } else {
        return false;
      }
    },
    //显示上传弹窗
    showGoodsPicDialog(v) {
      this.picList = v.picList == null ? [] : v.picList;
      this.goodsPicDialoVisible = true;
    },
    //预览图片
    handlePreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisibleImg = true;
    },
    //预览图片
    showScanCodeDetail(value) {
      this.dialogVisibleScanCode = true;
      let data = { uuid: value };
      queryBarCodeById(qs.stringify(data)).then((res) => {
        this.scanCodeData = res.records;
      });
    },
    handleSort(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        if (val.prop == 'scanningTime') {
          this.sort = 2;
          this.formInline.sortList = [
            { sort: 'asc', sortField: 'totalAmount' },
          ];
          this.search();
        }
        if (val.prop == 'payMoney') {
          this.formInline.sortList = [{ sort: 'asc', sortField: 'payMoney' }];
          this.search();
        }
        if (val.prop == 'orderTime') {
          this.formInline.sortList = [{ sort: 'asc', sortField: 'orderTime' }];
          this.search();
        }
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        if (val.prop == 'scanningTime') {
          this.sort = 1;
          this.formInline.sortList = [
            { sort: 'desc', sortField: 'totalAmount' },
          ];
          this.search();
        }
        if (val.prop == 'payMoney') {
          this.formInline.sortList = [{ sort: 'desc', sortField: 'payMoney' }];
          this.search();
        }
        if (val.prop == 'orderTime') {
          this.formInline.sortList = [{ sort: 'desc', sortField: 'orderTime' }];
          this.search();
        }
      }
    },
    goBack() {
      console.log('go back');
    },
  },
  //其他
  computed: {},
};
</script>
<style scoped>
#orderSearchDiv
  /deep/
  .el-radio-button-inner-datepicker
  .el-radio-button__inner {
  padding: 0;
}
#orderSearchDiv /deep/ .el-radio-button-inner-datepicker .el-input__inner {
  border: none;
  height: 38px;
}
#orderSearchDiv /deep/ #orderSearchForm {
  margin-left: -30px;
  padding: 0;
  display: inline-block;
  text-align: left;
}
#orderSearchDiv /deep/ .el-form--inline .el-form-item__content {
  width: 180px;
}
#orderSearchDiv /deep/ .el-range-editor.el-input__inner {
  width: 250px;
}
#orderSearchDiv /deep/ .el-dialog__body {
  padding-top: 0;
}
#order_total_flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
#order_total_flex /deep/ .order_content {
  cursor: pointer;
  width: 200px;
  padding: 20px 0;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#order_total_flex /deep/ .order_detail {
  width: 200px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#order_total_flex /deep/ .order_content2 {
  width: 60px;
  cursor: pointer;
  padding: 10px 0;
  margin: 0 1px;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#order_total_flex /deep/ .order_content .order_total_title {
  color: #000;
}
#order_total_flex /deep/ .order_content .order_total_info {
  margin-top: 10px;
}
#order_total_flex /deep/ .order_content .order_data {
  font-size: 1.4em;
  font-weight: bold;
}
#configTableDiv /deep/ .el-divider--horizontal {
  margin-top: 0;
}
#dataViewDiv /deep/ .el-input--suffix .el-input__inner {
  height: 40px;
}
</style>
